<template>
    <div id="main">
        <el-row>
            <el-col :span="17">
                <el-main>
                    <div style="height: fit-content;">

                        <div>
                            <el-button type="text" @click="qgzxV = !qgzxV">
                                勤工助学待办({{ !qgzxV ? '点我查看' : '点我收起' }})
                            </el-button>
                        </div>
                        <el-collapse-transition>
                            <div v-show="qgzxV">
                                <FdyQgzx v-hasPermi="['home:fdy:qgzx']" />
                                <ZdlsQgzx v-hasPermi="['home:zdls:qgzx']" />
                                <DeptQgzx v-hasPermi="['home:dept:qgzx']" />
                                <ZzbQgzx v-hasPermi="['home:zzb:qgzx']" />
                                <ZzbldQgzx v-hasPermi="['home:zzbld:qgzx']" />
                            </div>
                        </el-collapse-transition>

                        <div>
                            <el-button type="text" @click="otherV = !otherV">
                                其他待办({{ !otherV ? '点我查看' : '点我收起' }})
                            </el-button>
                        </div>
                        <el-collapse-transition>
                            <div v-show="otherV">
                                <JwcUndo v-hasPermi="['home:xg:undo1']" />
                                <XwUndo v-hasPermi="['home:xw:undo1']" />
                                <FdyUndo v-hasPermi="['home:fdy:undo1']" />
                                <StuUndo v-hasPermi="['home:stu:undo1']" />
                            </div>
                        </el-collapse-transition>

                    </div>

                    <div>
                        <jwcBottom v-hasPermi="['home:xg:undo1']" />

                    </div>
                </el-main>
            </el-col>

            <el-col :span="6">
                <el-main style="padding: 0;">

                    <el-card style="margin-top: 20px;height:220px;" shadow="always">
                        <div slot="header">
                            <span>快捷功能</span>
                        </div>
                        <div style="height: 30vh;position: relative;">
                            <el-col :span="6" style="text-align: center;" v-for="(v, i) in fast" :key="i">
                                <div style="width: 100%;height:11vh;" class="fast-act">
                                    <el-image :src="v.src"
                                        style="position: relative;width: 44.917px;height: 44px;"></el-image>
                                    <div style="font-size: 14px;position: relative;top: -5px;">{{ v.text }}</div>
                                </div>
                            </el-col>
                        </div>
                    </el-card>

                    <el-card style="margin-top: 20px;" shadow="always">
                        <div slot="header">
                            <span>提醒消息</span>
                        </div>
                        <el-row style="overflow-y: scroll;height: 200px;" v-if="have_msg">
                            <el-col style="margin-bottom: 10px;border-bottom: 1px dotted lightblue;cursor: pointer;"
                                v-for="(v, i) in msg_list" :key="i" :span="24" @click.native="msgVClick(v.content)">
                                <span style="overflow: hidden;">{{ v.content.length > 20 ? v.content.substr(0, 17) +
                                    "..." :
                                    v.content }}</span>
                            </el-col>

                        </el-row>
                        <div style="height: 200px;" v-else>
                            暂无消息
                        </div>
                    </el-card>

                    <el-card style="margin-top: 20px;height: 230px;" shadow="always">
                        <div slot="header">
                            <span>公示栏</span>
                        </div>
                        <el-row v-if="have_comp">
                            <div style="height: 25vh; overflow-y: scroll;overflow-x: hidden;">
                                <div v-for="(v, i) in comp_list" :key="i" style="cursor: pointer;margin-bottom: 5px;">
                                    {{ v.submitterName }}--{{ v.projectName }} -- 审核通过
                                </div>
                            </div>
                        </el-row>
                        <div v-else>
                            暂无消息
                        </div>
                    </el-card>

                </el-main>
            </el-col>
        </el-row>

        <el-dialog title="消息" :visible.sync="msgV" width="30%">
            <span>{{ msg_content }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="msgV = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import { listMsg } from "@/api/stuCQS/process-center/msg";
import { getCompleted } from "@/api/stuCQS/process-center/auditDetails";

import jwcBottom from "./comps/jwc-bottom.vue";


import ZzbldQgzx from "./comps/zzbld-qgzx.vue";
import ZzbQgzx from "./comps/zzb-qgzx.vue";
import ZdlsQgzx from "./comps/zdls-qgzx.vue";
import FdyQgzx from "./comps/fdy-qgzx.vue";
import DeptQgzx from "./comps/dept-qgzx.vue";

import JwcUndo from "./comps/jwc-undo.vue";
import XwUndo from "./comps/xw-undo.vue";
import FdyUndo from "./comps/fdy-undo.vue";
import StuUndo from "./comps/stu-undo.vue";


export default {
    name: "index-1",
    components: {
        JwcUndo, XwUndo, FdyUndo, StuUndo,
        jwcBottom,
        ZzbldQgzx, ZzbQgzx, ZdlsQgzx, FdyQgzx, DeptQgzx
    },
    data() {
        return {
            qgzxV: true, //勤工助学待办展开

            otherV: true,//其他待办展开

            fast: [
                {
                    src: require("@/assets/icons/index-icon/Icon-Folder.png"),
                    url: "",
                    text: "操作手册",
                },
                {
                    src: require("@/assets/icons/index-icon/Icon-Arrow.png"),
                    url: "",
                    text: "我的申请",
                },
                {
                    src: require("@/assets/icons/index-icon/Icon-Info.png"),
                    url: "",
                    text: "我的待办",
                },
                {
                    src: require("@/assets/icons/index-icon/Icon-Clock.png"),
                    url: "",
                    text: "综合素质",
                },
                {
                    src: require("@/assets/icons/index-icon/Icon-Send.png"),
                    url: "",
                    text: "我的流程",
                },
                {
                    src: require("@/assets/icons/index-icon/Icon-Chart.png"),
                    url: "",
                    text: "优秀班级",
                },
                {
                    src: require("@/assets/icons/index-icon/Icon-Home.png"),
                    url: "",
                    text: "优秀宿舍",
                },
                {
                    src: require("@/assets/icons/index-icon/Icon-Menu.png"),
                    url: "",
                    text: "已办任务",
                },
            ],
            msg_list: [],
            have_msg: false,
            msg_content: "",
            msgV: false,


            comp_list: [],
            have_comp: false,
            comp_msg: "",
            compV: false,

        }
    },
    created() {
        this.getCompleted();
        this.listMyMsg();
    },

    watch: {
        "iamChildType"(newVal, oldVal) {
            this.child_list.map((v) => {
                if (v.ruleId == newVal) {
                    this.iam_add_record = v.maxScore
                }
            });
        },
    },
    methods: {

        async getCompleted() {
            let res = await getCompleted();
            if (res.rows.length > 0) {
                this.have_comp = true;
                this.comp_list = [...res.rows];
            }
        },
        msgVClick(v) {

            this.msg_content = v;
            this.msgV = true;
        },

        //列出我的消息
        async listMyMsg() {
            let res = await listMsg();
            if (res.rows.length > 0) {
                this.have_msg = true;
                this.msg_list = [...res.rows];
            }
        },


    }
}
</script>
<style lang="scss" scoped>
div::-webkit-scrollbar {
    width: 4px;
}

div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0.2;
    background: fade(blue, 60%);
}

div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: fade(blue, 30%);
}



#main {
    background-color: rgb(250, 254, 255);
    padding: 10px 0 10px 20px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    overflow: scroll;
}

.el-card__header {
    border: none;
}

.el-header,
.el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    color: #333;
    margin: 0;
}
</style>